<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="seeClose" ></div>
      <div class="tour">

        <div class="rele-titles">
          <span :class="{current:Entryshow === 1}" @click="changeTitle(1)">客源详情</span>
          <span :class="{current:Entryshow === 2}" @click="changeTitle(2)">跟进记录</span>
          <img @click="seeClose" src="../assets/img/tub.png" alt="">
        </div>
        <div v-show="Entryshow === 1">
        <div class="tour-info">
          <!-- 客户资料 -->
          <div class="custo">
            <div class="custo-title">客户资料</div>
            <ul class="custo-list">
              <li>
                <div class="custo-name">姓名</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.name" name="" disabled >
                </div>
              </li>
              <li>
                <div class="custo-name">手机</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.phone" name=""  disabled>
                </div>
              </li>
              <li>
                <div class="custo-name">省份</div>
                <div id="custo-input" class="custo-input">
                  <select v-model="passengerList.AreaSectionProvince"  placeholder="请选择" disabled style="width:102%;height: 27px;">
                    <option :value="passengerList.AreaSectionProvince">
                      {{passengerList.AreaSectionProvince}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">城市</div>
                <div class="custo-input">
                  <select  v-model="passengerList.AreaSectionCity" placeholder="请选择" disabled style="width:102%;height: 27px;">
                    <option :value="passengerList.AreaSectionCity">
                      {{passengerList.AreaSectionCity}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">邮箱</div>
                <div class="custo-input">
                  <input type="" name="" v-model="passengerList.email" disabled >
                </div>
              </li>
              <li>
                <div class="custo-name">微信</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.wechat" name="" disabled >
                </div>
              </li>
              <li>
                <div class="custo-name">性别</div>
                <div class="custo-input">
                  <select disabled  v-model="passengerList.sex" placeholder="请选择" style="width:102%;height: 27px;">
                    <option :value="item.id" :key="item.id" v-for="item of downList.TouristsSex">
                      {{item.title}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">住址</div>
                <div class="custo-input">
                  <input type="" name="" v-model="passengerList.address"  disabled>
                </div>
              </li>
              <!--<li>-->
                <!--<div class="custo-name">状态</div>-->
                <!--<div class="custo-input">-->
                  <!--<select v-model="formData.state" placeholder="请选择" style="width:91%;height: 27px;">-->
                    <!--<option-->
                      <!--v-for="item in Tourlist.TouristsState"-->
                      <!--:key="item.id"-->
                      <!--:label="item.title"-->
                      <!--:value="item.id">-->
                    <!--</option>-->
                  <!--</select>-->
                <!--</div>-->
              <!--</li>-->
              <li>
                <div class="custo-name">职业</div>
                <div class="custo-input">
                  <select disabled placeholder="请选择"   v-model="passengerList.occupation" style="width:102%;height: 27px;">
                    <option :key="item.id" :value="item.id" v-for="item of downList.TouristsOccupation">
                      {{item.title}}
                    </option>
                  </select>
                </div>
              </li>
              <!--<li>-->
              <!--<div class="custo-name">租/买</div>-->
              <!--<div class="custo-input">-->
                <!--<select v-model="formData.rentorbuy" placeholder="请选择" style="width:91%;height: 27px;">-->
                  <!--<option-->
                    <!--v-for="item in Tourlist.TouristsOccupation"-->
                    <!--:key="item.id"-->
                    <!--:label="item.title"-->
                    <!--:value="item.id">-->
                  <!--</option>-->
                <!--</select>-->
              <!--</div>-->
            <!--</li>-->
              <li>
                <div class="custo-name">等级</div>
                <div class="custo-input">

                  <select disabled  v-model="passengerList.grade" placeholder="请选择" style="width:102%;height: 27px;">
                    <option :value="item.id" v-for="item in downList.TouristsGrade" :key="item.id">
                      {{item.title}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">门店</div>
                <div class="custo-input">
                  <input type="" disabled  v-model="passengerList.departmentStore"   name="">
                </div>
              </li>
              <li>
                <div class="custo-name">经纪人</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.userAgent" disabled  name="">
                </div>
              </li>
              <li>
                <div class="custo-name">区域</div>
                <div class="custo-input">
                  <input type="" disabled v-model="passengerList.departmentRegion"  name="">
                </div>
              </li>
              <li>
                <div class="custo-name">组别</div>
                <div class="custo-input">
                  <input type="" disabled v-model="passengerList.departmentGroup" name="">
                </div>
              </li>
              <li>
                <div class="custo-name">交易</div>
                <div class="custo-input">
                  <select  v-model="passengerList.transaction" disabled placeholder="请选择" style="width:102%;height: 27px;">
                    <option :value="item.id"  :key="item.id" v-for="item of downList.TouristsTransaction">
                      {{item.title}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">编号</div>
                <div class="custo-input" >
                  <input v-model="passengerList.id" type="text" disabled>
                </div>
              </li>
              <li>
                <div class="custo-name">公私客</div>
                <div class="custo-input">

                  <select v-model="passengerList.publicandprivate" disabled placeholder="请选择" style="width:102%;height: 27px;">
                    <option :value="item.id" v-for="item of downList.TouristsPublicandprivate" :key="item.id">
                        {{item.title}}
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="custo-name">委托日</div>
                <div class="custo-input">
                  <el-date-picker v-model="passengerList.entrustment_time" style="width:100%;border: 1px solid #a0a0a0;"
                                   disabled
                                  type="date"
                                  placeholder="选择日期">
                  </el-date-picker>
                </div>
              </li>
            </ul>
          </div>
          <!-- 客户资料 end-->
          <!-- 客户需求 -->
          <div class="demand">
            <div class="custo-title">客户需求</div>
            <ul class="custo-list custo-list1">
              <!-- 价格 -->
              <div class="pub-label">价格</div>
              <li>
                <div class="custo-name">售总价</div>
                <div class="custo-input">
                  <input type="" disabled v-model="passengerList.totalsales_price" name=""> <span>万元</span>
                </div>
              </li>
              <li>
                <div class="custo-name">售单价</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.saleunit_price"  name="" disabled ><span>万元/㎡</span>
                </div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" name="" v-model="passengerList.rent_price_month"  disabled> <span>元/月</span>
                </div>
              </li>
              <li>
                <div class="custo-name">租金</div>
                <div class="custo-input">
                  <input type="" v-model="passengerList.rent_price_year"  name="" disabled><span>元/年</span>
                </div>
              </li>
            </ul>
            <!-- 价格 end-->

            <!--房屋  -->
            <div class="Houses">
              <div class="pub-label">房屋</div>
              <ul class="Houses-list">
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">房</div>
                    <div class="custo-input">
                      <select v-model="passengerList.room"  placeholder="请选择" disabled style="width:92%;height: 27px;">
                        <option v-for="item of downList.TouristsrRoom" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">厅</div>
                    <div class="custo-input">
                      <select  v-model="passengerList.office" placeholder="请选择" disabled style="width:92%;height: 27px;height: 27px;">
                        <option v-for="item of downList.TouristsOffice" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">卫</div>
                    <div class="custo-input">
                      <select  v-model="passengerList.wei" placeholder="请选择" disabled  style="width:92%;height: 27px;">
                        <option v-for="item of downList.TouristsWei" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">朝向</div>
                    <div class="custo-input">
                      <select v-model="passengerList.orientation" placeholder="请选择" disabled style="width:98%;height: 27px;">
                        <option v-for="item of downList.TouristsOrientation" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">用途</div>
                    <div class="custo-input">
                      <select  v-model="passengerList.purpose"  placeholder="请选择" disabled style="width:92%;border: 1px solid #a0a0a0;height: 27px;">
                      <option v-for="item of downList.TouristsPurpose" :key="item.id" :value="item.id">{{item.title}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">装修</div>
                    <div class="custo-input">
                      <select v-model="passengerList.renovation" placeholder="请选择"  disabled style="width:92%;height: 27px;">
                        <option v-for="item of downList.TouristsRenovation" :key="item.id" :value="item.id">
                          {{item.title}}
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--房屋  end-->
            <!--地段  -->
            <div class="Houses">
              <div class="pub-label">地段</div>
              <ul class="Houses-list">
                <li>
                  <!--<div class="Houses-li">-->
                    <!--<div class="custo-name">省份</div>-->
                    <!--<div class="custo-input">-->
                      <!--<select v-model="passengerList.section_province" placeholder="请选择" disabled  style="width:100%;height: 27px;" >-->
                        <!--<option v-for="item of provinceList" :value="item.CODE" :key="item.CODE">{{item.region_name_c}}</option>-->


                      <!--</select>-->
                    <!--</div>-->
                  <!--</div>-->
                  <div class="Houses-li">
                    <div class="custo-name">城市</div>
                    <div class="custo-input">

                      <select  v-model="passengerList.section_city" placeholder="请选择" disabled  style="width:100%;height: 27px;" >
                        <option v-for="item of cityList" :key="item.CODE" :value="item.CODE">
                          {{item.region_name_c}}
                        </option>
                      </select>
                    </div>
                  </div>
                  <div class="Houses-li">
                    <div class="custo-name">县/区</div>
                    <div class="custo-input">

                      <select v-model="passengerList.section_xian" placeholder="请选择" disabled  style="width:100%;height: 27px;">
                        <option v-for="item of districtList" :key="item.CODE" :value="item.CODE">
                          {{item.region_name_c}}
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="Houses-li">
                    <div class="custo-name">小区</div>
                    <div class="custo-input">

                      <select v-model="passengerList.section_residential" placeholder="请选择" disabled  style="width:100%;height: 27px;">
                        <option v-for="item of minDistrictList" :key="item.CODE" :value="item.CODE">
                          {{item.region_name_c}}
                        </option>
                      </select>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!--地段  end-->
          </div>
          <!-- 客户需求 end-->
        </div>
        <!-- 备注 -->
        <div class="rema">
          <textarea placeholder="请输入备注..."  disabled></textarea>
        </div>
        </div>
        <!--跟进查看-->
        <div v-show="Entryshow === 2">
            <div class="sale-info">
              <table>
                <!-- 标题 end-->
                <tr class="sale-info-title">
                  <td>跟进人</td>
                  <td>跟进方式</td>
                  <td>跟进内容</td>
                  <td>跟进时间</td>
                   <td>跟进编辑</td>
                </tr>
                <!-- 标题 end-->
                <!-- 列表循环 -->
                <tr v-for="(item,index) in allList" :key="index">
                  <td>{{item.user.name}}</td>
                  <td>{{item.tourists_visit_modes.title}}</td>
                  <td>{{item.visit_desc}}</td>
                  <td>{{item.create_time}}</td>
                  <td><span class = "edit" @click="Passenger(item.id)">跟进编辑</span></td>
                </tr>
                <!-- 列表循环 end-->
              </table>
              <!-- 分页 -->
              <div class="page-list" >
                <el-pagination
                  layout="prev, pager, next"  @current-change="handleCurrentChange"
                  :total="pages">
                </el-pagination>
              </div>
              <!-- 分页 end-->
            <!-- 楼盘列表 end-->
          </div>

        </div>
        <!--跟进编辑-->
        <div v-show="PassengerShow">
          <Passenger :LDmodal="opensunmit" :ids="passengerId" :PassengerClose="openPassenger"></Passenger>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">

  import Passenger from  './passenger';
  export default {
    components:{
      Passenger
    },
    props:{
      seeClose:{
        type:Function
      },
      sid: {
        type: Number
      },
      ids:{
        type:Number
      },
    },
    data () {
      return {
        passengerId:'',
        PassengerShow:false,
        pageId:0,
        pages:1,
        allList:[],
        Entryshow:1,
        passengerList:{}, //客源数据
        downList:[], //下拉数据
        provinceList:[], //省份数据
        cityList:[], //城市数据
        districtList:[], //区数据
        minDistrictList:[] //小区数据


      }
    },
    // watch:{
    //   provinceList(){
    //     //调用城市函数
    //     this.getCity();
    //
    //   }
    // },
    methods: {

      handleCurrentChange(index) {
        this.pageId = index;
        this.getRecord();
      },

      //点击切换
      changeTitle(index){
        this.Entryshow = index;


      },

      //  跟进记录

      getRecord() {
        this.$http.get('newapi/Touristsvisit/index?page=' + this.pageId).then((res) => {
          this.pages = res.data.res.total;
          this.allList = res.data.res.data;
        })

      },
      // 跟进编辑
      Passenger:function(id){
        this.passengerId = id;
         this.PassengerShow = !this.PassengerShow
       },
      openPassenger:function(){
         this.PassengerShow = !this.PassengerShow
      },
      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
        this.submitHide();

      },
      //获取客源信息
      getPassenger(id){
        let _this = this;
        this.$http.get('/newapi/Tourists/getdetail',{
          params:{
            id:id
          }
        }).then(({data})=>{
          _this.passengerList = data.res;

        })


          //调用下拉数据函数
        this.getDownList();



      },

      //获得下拉数据
      getDownList(){
       this.$http('/newapi/Touristslist/index').then(({data})=>{
            this.downList = data.res;
        })

        //获取省份
        this. getProvince();
      },

      //获取省份
      getProvince(){
        let _this = this;
        this.$http('/newapi/Area/getAreaRegion',{
          params:{
            country_code:"CN"
          }
        }).then(({data})=>{
            //console.log(res);
            _this.provinceList =  data.res;
        })
      },

    //根据省份id获取城市
    // getCity(){
    //   let _this = this;
    //
    //   this.$http('/newapi/Area/getAreaRegion',{
    //     params:{
    //        "upper_region":_this.passengerList.section_province,
    //       "country_code":"CN"
    //
    //
    //     }
    //   }).then(({data})=>{
    //     _this.cityList = data.res;
    //     //调用区函数
    //     _this.getDistrict();
    //   })
    // },

    //跟据城市id获得区
    getDistrict(){
      //passengerList.section_city
       let _this = this;

      this.$http('/newapi/Area/getAreaRegion',{
        params:{
          country_code:"CN",
          upper_region:_this.passengerList.section_city
        }
      }).then(({data})=>{
        _this.districtList = data.res;
        _this.getMinDistrict();
      })
    },
    //根据区获得小区
    getMinDistrict(){
      //passengerList.section_xian
      let _this = this;

      this.$http('/newapi/Area/getAreaRegion',{
        params:{
          country_code:"CN",
          upper_region:_this.passengerList.section_xian
        }
      }).then(({data})=>{
        _this.minDistrictList = data.res;
      })
    }




    }
  }
</script>
<style scoped>
  .Houses {
    width: 100%;
    float: left;
  }
  .Houses-list {
    width: 94%;
    float: left;
    padding: 0 3%;
  }
  .Houses-li {
    width: 50%;
    float: left;
  }
  .H-p2 {
    width: 50% !important
  }
  .H-p2 input {
    width: 50% !important;
    margin-right: 3px;
  }
  .H-p1 {
    width: 33.333333333%;
    float: left;
  }
  .H-p1 input {
    width: 60%;
    margin-right: 3px;
    padding-left: 2%;
    height: 25px;
    line-height: 25px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
  }
  .H-p1 span {
    margin-left: 3px;
    display: inline-block;
    text-align: center;
  }
  .Houses-list li {
    width: 50%;
    height: 20px;
    margin-bottom: 10px;
    float: left;
  }
  .rema {
    margin-top: 0.5%;
    width: 97.5%;
    padding: 1%;
    float: left;
    border: 1px solid #d3d3d3;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .rema textarea {
    width: 99%;
    font-size: .9em;
    height: 60px;
    background: none;
    padding-left: 10px;
    border: none;
  }

  .custo-list1 li input {
    width: 60%;
  }
  .pub-label {
    font-weight: bold;
    margin-left: 3%;
    margin-bottom: 8px;
  }
  .custo-list1 li span {
    margin-left: 2px;
    display: inline-block;
  }
  .demand {
    width: 56.5%;
    height: 320px;
    overflow: hidden;
    margin-top: 47px;
    float: right;
    background: #ffffff;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-name {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
    font-weight:bold;
  }
  .custo-input {
    width: 70%;
    float: left;
  }
  .custo-input input {
    width: 98%;
    padding-left: 2%;
    height: 25px;
    line-height: 15px;
    font-size: .9em;
    border: 1px solid #a0a0a0;
    cursor: pointer;
  }
  .custo-list {
    width: 94%;
    padding: 0 3%;
    float: left;
  }
  #custo-input input {
    height: 0 !important;
  }
  .custo-list li {
    width: 50%;
    height: 20px;
    float: left;
    margin-bottom: 10px;
  }
  .tour {
    width: 58%;
    background: #f9f9f9;
    padding-bottom: 4px;
    position: absolute;
    z-index: 10;
    left: 20%;
    height: 480px;
    /*overflow-y: auto;*/
    overflow: hidden;
    /*overflow-y: scroll;*/
    top: 13%;
    border-radius: 5px;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .custo-title {
    width: 100%;
    float: left;
    text-align: center;
    font-weight: bold;
    line-height: 45px;
  }
  .custo {
    width: 43%;
    float: left;
    margin-top: 47px;
    height: 320px;
    overflow: hidden;
    box-shadow: #e8e7e7 0px 0px 10px;
    background: #ffffff;
  }
  .tour-info {
    width: 100%;
    float: left;
  }
  img:hover {
    background: #bd2c00 !important;
    color: #ffffff;
  }
  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    border-radius: 10px;

  }
  .rele-titles {
    width: 48%;
    padding: 0 0.5%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .rele-titles img{
    left: 91%;
    cursor: pointer;
  }
  .rele-titles span{
    cursor: pointer;
  }
  .current {
    color: #ed7d31;
    background: #fff;
  }
  /*跟进记录*/
  .sale-info {
    width: 56%;
    float: left;
    position: fixed;
    margin-top: 63px;
    padding-left: 11px;
    height: calc(100% - 214px);
  }
  table {
    width: 100%;
  }
  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;
  }
  .sale-list-li-input select{
    width: 90%;
    float: left;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #d3d3d3;
    border: 1px solid rgb(160, 160, 160);
  }
  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 70px;
  }

  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;
  }
  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%
  }
  .sale-info-title {
    background-color:  #1590ed;
    /*  position: fixed;*/
    width: 100%;
    overflow: hidden;
    font-weight:bold;
  }
  tr:nth-child(n+2):hover{
    background: #f9f9f9
  }
  .sale-list-li-input input {
    width: 90%;
    float: left;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    background: #fff;
    border: 1px solid #d3d3d3;
    border: 1px solid rgb(160, 160, 160);
  }
  .sale-btn button {
    margin-right: 40px;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #ed7d31;
    color: #fff;
    border: none;
  }
  select{
    cursor: pointer;
  }
  textarea{
    cursor: pointer;
  }
</style>
